<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入库管理-云校通_教师版</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>/style/icon.css" />
<link rel="stylesheet" href="<%=basePath%>/style/weui5.css" />
<link rel="stylesheet" href="<%=basePath%>/css/xcgl_kcgl.css" />
<style>
.weui-header-left .aicon {
	font-family: iconfont !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
}

.bg-white {
	border-bottom: 1px solid #ccc;
}

.aicno {
	font-family: iconfont !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
}

.weui_panel_bd {
	border-bottom: 1px solid #ccc;
}

.weui_panel_bd .icon {
	position: absolute;
	right: 4%;
}

.weui_panel_bd .big_size {
	float: left;
	margin-bottom: 8px;
	margin-right: 12%;
	font-size: 15px;
}

.db_main {
	position: relative;
	top: -10px;
}

.db_main .lititle {
	background: #fff;
	height: 50px !important;
	line-height: 50px;
}
.db_main .area{
width: 40%; height: 26px;
overflow: hidden;
margin-left: 0;
text-align: right;
text-overflow:ellipsis;
white-space:nowrap;}
</style>
</head>
<body>

	<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
	<div id="list">
		<div class="weui-header bg-blue">
			<div class="weui-header-left">
				<a onclick="back()" href="javascript:;" class="aicon icon-109 f-white">返回</a>
			</div>
			<h1 class="weui-header-title">入库管理</h1>
		</div>

		<div class="main" style="padding-bottom: 60px;">
			<div class="data_box" id="dataBox">
				<div class="db" id="dataList"></div>
			</div>
		</div>
		<div class="btnBox">
			<img class="getTemple" src="<%=basePath%>/images/getTemple.png">
			<a href="insertStockIndex/add"><img class="newBtn" src="<%=basePath%>/images/newBtn.png"></a> 
			<img src="<%=basePath%>/images/addBtnnew.png" class="bigger">
		</div>
	</div>

	<div id="detail" style="display:none;">
		<div class="weui-header bg-blue">
			<div class="weui-header-left">
				<a onclick="closeDetail()" class="aicon icon-109 f-white">关闭</a>
			</div>
			<h1 class="weui-header-title">入库详情</h1>
		</div>
		<div class="main">
			<ul class="d_title">
				<li>物品</li>
				<li>单价</li>
				<li>数量</li>
			</ul>
			<div class="data_box" style="padding-bottom: 12%;">
				<div id="item1"></div>
				<div class="weui-loadmore" id="clickToLoadData">
					<span class="weui-loadmore-tips" id="moreOrNoData">点击加载更多数据...</span>
				</div>
				<div class="weui-loadmore" style="display: none" id="loadindData">
					<i class="weui-loading"></i> <span class="weui-loadmore-tips">正在加载中...</span>
				</div>
			</div>  
     </div>
  </div>
   <script type="text/javascript">
	var page = 0, size = 5;
	var param = {page:0,rows:5,inputId:0}
	$(function() {
		$('#dataBox').dropload({
			scrollArea : window,
			autoLoad   : true,
			domDown:{
				domClass : 'dropload-down',
				domRefresh : '<div class="dropload-refresh f10 " ><i class="icon icon-20"></i>上拉加载更多</div>',
				domLoad : '<div class="dropload-load f10"><span class="weui-loading"></span>正在加载中...</div>',
			    domNoData : '<div class="dropload-noData">没有更多数据了</div>'
			},
			domUp:{
				domClass : 'dropload-up',
				domRefresh : '<div class="dropload-refresh"><i class="icon icon-114"></i>上拉加载更多</div>',
				domUpdate : '<div class="dropload-load f10"><i class="icon icon-20"></i>释放更新...</div>',
				domLoad : '<div class="dropload-load f10"><span class="weui-loading"></span>正在加载中...</div>'
			},
			loadDownFn : 
				function(me) {
					page++;
					window.params = {page : page,rows : size};
				$.ajax({
					url : basePath + "/ls/school/property/inputStock/query",
					type : "post",
					dataType : "json",
					data : window.params,
					success : function(data) {
						if (data.data.rows.length == 0|| window.params.page	* window.params.rows >= data.data.total) {
								    me.lock();
									me.noData();
						}
					// 为了测试，延迟1秒加载
					setTimeout(
					    function(){
						   loadDataToHtml(data.data);me.resetload();
						}, 1000);
					},
						error : function(xhr, type) {
						}
				});
			 }
		 });
	 });
	function loadDataToHtml(data) {
		if (data.rows.length > 0) {
			var html = "";
			for ( var i in data.rows) {
				var item = data.rows[i];
				html += '<div class="weui_panel_bd clear inputList" id ="'+ item.id +'">\
                          <div class="weui_media_box weui_media_text">\
                           <h4 class="weui_media_title">' + item.no + '</h4>\
                           <span class="icon icon-108"></span>\
                           <p class="weui_media_desc big_size">操作人: ' + item.operatorName + '</p>\
                           <p class="weui_media_desc big_size">总金额 ：' + item.totalMoney + ' 元</p>\
                           <p class="weui_media_desc clear">入库时间: ' + new Date(item.createTime).format('yyyy年 MM月 dd日 hh:mm:ss') + '</p></div>\
                        </div>';
			}
		$('#dataList').append(html);
		}
	}
	//加载详情页面
	function loadListDetail(param) {
		param.page++;
		$.ajax({
		  url : basePath + "/ls/school/property/inputStock/detail/query",
		  type : "post",
		  dataType : "json",
		  data : param,
		  success : function(data) {	
				if (data.data.rows.length == 0 || param.page * param.rows >= data.data.total) {
					$("#moreOrNoData").html("没有更多数据了...");
					$("#clickToLoadData").unbind();
				}
				writerDataToHtml(data.data);
				setTimeout(function() {$("#clickToLoadData").css('display', 'block');$("#loadindData").css('display','none');}, 800);
		  }
	    });
	}
	function writerDataToHtml(data) {
			if (data.rows.length > 0) {
				var html = "";
				for ( var i in data.rows) {
					var item = data.rows[i];
					html += '<div class="db" style="margin-bottom: 0px;">\
						       <ul class="db_title">\
					             <li>'+ item.goodsName +'</li>\
					             <li>' + (item.price) +' 元</li>\
					             <li>' + item.number + '<i class="icon icon-6 f-blue" style="position: relative; left: 20px; font-size: 2px;"></i></li>\
				               </ul>\
				               <div class="db_main weui-border-b">\
						              <ul>\
							             <li>类别</li>\
							             <li class="right">'+ item.typeName +'</li>\
						              </ul>\
						              <ul>\
							             <li>型号</li>\
							             <li class="right">'+ item.goodsAttr +'</li>\
						              </ul>\
						              <ul>\
							             <li>总金额</li>\
							             <li class="right">'+ (item.price * item.number) +'元</li>\
						              </ul>\
						              <ul>\
										<li>存放地点</li>\
										<li class="right area">'+ (item.place != null?item.place:"...") +'</li>\
									 </ul>\
									 <div class="describe">\
										<h4>描述</h4>\
										<p>' + item.describe +'</p>\
									</div>\
									 <ul>\
										<li>购买时间</li>\
										<li class="right">'+ (item.buyTime != null?item.buyTime:"") +'</li>\
									 </ul>\
							   </div>\
					        </div>';
				}
				$('#item1').append(html);
			}
		}
		//点击加载更多数据
		$("#clickToLoadData").onclick = function() {
			$("#clickToLoadData").css('display', 'none');
			$("#loadindData").css('display', 'block');
			loadListDetail(param);
		}
		
		//显示详情页 
		$("#dataList").on("click",".inputList",function(){
			param.inputId = this.id;
			loadListDetail(param);
			$("#list").css('display', 'none');
			$("#detail").css('display', 'block');
		})
		//关闭详情页
		function closeDetail() {
			$("#list").css('display', 'block');
			$("#detail").css('display', 'none');
			$("#item1").empty();
			param.page = 0;
			param.inputId = 0;
		}
		
		Date.prototype.format = function(fmt) {
			var o = {
				"M+" : this.getMonth() + 1,
				"d+" : this.getDate(),
				"h+" : this.getHours(),
				"m+" : this.getMinutes(),
				"s+" : this.getSeconds(),
				"q+" : Math.floor((this.getMonth() + 3) / 3),
				"S" : this.getMilliseconds()
			};
			if (/(y+)/.test(fmt)) {
				fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
						.substr(4 - RegExp.$1.length));
			}
			for ( var k in o) {
				if (new RegExp("(" + k + ")").test(fmt)) {
					fmt = fmt.replace(RegExp.$1,
					(RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				}
			}
			return fmt;
		}
		
		$('#item1').on('click',".db_title",function(){
			if($(this).next().css('display') === 'none')
			    $(this).next().css('display','block');
			else
				$(this).next().css('display','none');
		 }
		)
	</script>
		<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
		<script src="<%=basePath%>/js/btnAnima.js"></script>
</body>
</html>